<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>志愿推荐页</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Serif+SC:200,300,400,500,600,700,900">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
    <link rel="stylesheet" href="./assets/style.css">
    <style>
        .theBtn :hover{
            background-color: #388bea;
        }
        .theBtn{
            width: 520px; background-color: #6ad8ff; border: 0px; padding: 5px 10px; color: white; border-radius: 10px; font-size: 1.5em; height: 50px; margin-top: 70px;
        }
    </style>
</head>
<body>

<div id="app">

    <!-- 固定导航栏 -->
    <div class="container">
        <div class="row nav upnav">
            <div class="col-lg-4"><h1><div style="font-family: 'Arial';">山东省高考志愿系统</div></h1></div>
            <div class="col lg-4"></div>
            <div class="col-lg-3 seacher"><input type="text" placeholder="输入院校或专业"><button class="btn">搜索</button></div>
        </div>
        <div class="row nav botnav">
            <div class="col-lg-2"></div>
            <div class="col-lg-8  row">
                <div class="col-lg-2">
                    <a href="index.html">
                        首页
                    </a>
                </div>
                <div class="col-lg-2">
                    <a href="universities.html">
                        院校查找
                    </a>
                </div>
                <div class="col-lg-2">
                    <a href="./majors/majors.html">
                        专业查找
                    </a>
                </div>
                <div class="col-lg-2">
                    <a href="recommend.html" style="font-weight: bold; color: rgb(57, 83, 131);">
                        志愿推荐
                    </a>
                </div>
                <div class="col-lg-2">
                    <a href="ranking.html">
                        大学排行
                    </a>
                </div>
                <div class="col-lg-2">
                    <a href="javascript:;" @click="toAdmin()">
                        管理员
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- banner -->
    <div class="banner">
        <div class="container-fluid" style="padding: 0%;">
            <img src="./img/banner.png" class="d-block w-100">
        </div>
    </div>


    <div v-show="beforeRec">
        <div class="container">
            <div style="margin-bottom: 50px;margin-top: 50px; margin-left: 50px;">
                <span class="yxtuijian2">请于此处选择您的理想地区和专业类型</span>
                <div class="loi" style="color: rgb(97, 97, 97); font-size: 0.8em;">
                    另外, 系统还会获取您的高考情况作为推荐根据, 请确保您的个人信息准确无误</div>
            </div>

            <div>
            <span style="margin-bottom: 50px;margin-top: 50px; margin-left: 50px; font-size: 24px" class="yxtuijian2">
                个人信息核实</span></div>

            <div class="row" style="background-color: white; margin:30px 50px; padding-top: 20px; padding-bottom: 20px; border-radius: 5px" >
                <div class="col-lg-1"></div>
                <div class="col-lg-10">
                    <table class="table table-borderd table-hover">
                        <thead>
                        <tr>
                            <th width="15%">姓名</th>
                            <th width="10%">高考分数</th>
                            <th width="15%">选科组合</th>
                            <th width="15%">高考地区</th>
                            <th width="15%">地区排名</th>
                            <th width="30%">考试类型</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>{{users.name}}</td>
                            <td>{{users.score}}</td>
                            <td>{{users.type}}</td>
                            <td>山东省</td>
                            <td>{{users.ranks}}</td>
                            <td>普通高等学校招生全国统一考试</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div>
            <span style="margin-bottom: 50px;margin-top: 50px; margin-left: 50px; font-size: 24px" class="yxtuijian2">
                请选择您的理想院校地区</span></div>

            <div class="row" style="background-color: white; margin:30px 50px; padding: 20px 5px; border-radius: 5px; " >
                <div class="col-lg-12">
                    <div class="wapperA" style="border-bottom: white">
                        <div class="tagwapper">
                            <div>
                                <label class="tagA"><input type="checkbox" value="北京" name="region" v-model="region"/>北京
                                </label>
                                <label class="tagA"><input type="checkbox" value="天津" name="region" v-model="region"/>天津
                                </label>
                                <label class="tagA"><input type="checkbox" value="河北" name="region" v-model="region"/>河北
                                </label>
                                <label class="tagA"><input type="checkbox" value="山西" name="region" v-model="region"/>山西
                                </label>
                                <label class="tagA"><input type="checkbox" value="内蒙古" name="region" v-model="region"/>内蒙古
                                </label>
                                <label class="tagA"><input type="checkbox" value="辽宁" name="region" v-model="region"/>辽宁
                                </label>
                                <label class="tagA"><input type="checkbox" value="吉林" name="region" v-model="region"/>吉林
                                </label>
                                <label class="tagA"><input type="checkbox" value="黑龙江" name="region" v-model="region"/>黑龙江
                                </label>
                                <label class="tagA"><input type="checkbox" value="上海" name="region" v-model="region"/>上海
                                </label>
                                <label class="tagA"><input type="checkbox" value="江苏" name="region" v-model="region"/>江苏
                                </label>
                                <label class="tagA"><input type="checkbox" value="浙江" name="region" v-model="region"/>浙江
                                </label>
                                <label class="tagA"><input type="checkbox" value="安徽" name="region" v-model="region"/>安徽
                                </label>
                                <label class="tagA"><input type="checkbox" value="福建" name="region" v-model="region"/>福建
                                </label>
                                <label class="tagA"><input type="checkbox" value="江西" name="region" v-model="region"/>江西
                                </label>
                                <label class="tagA"><input type="checkbox" value="山东" name="region" v-model="region"/>山东
                                </label>
                                <label class="tagA"><input type="checkbox" value="河南" name="region" v-model="region"/>河南
                                </label>
                                <label class="tagA"><input type="checkbox" value="湖北" name="region" v-model="region"/>湖北
                                </label>
                                <label class="tagA"><input type="checkbox" value="湖南" name="region" v-model="region"/>湖南
                                </label>
                                <label class="tagA"><input type="checkbox" value="广东" name="region" v-model="region"/>广东
                                </label>
                                <label class="tagA"><input type="checkbox" value="广西" name="region" v-model="region"/>广西
                                </label>
                                <label class="tagA"><input type="checkbox" value="海南" name="region" v-model="region"/>海南
                                </label>
                                <label class="tagA"><input type="checkbox" value="重庆" name="region" v-model="region"/>重庆
                                </label>
                                <label class="tagA"><input type="checkbox" value="四川" name="region" v-model="region"/>四川
                                </label>
                                <label class="tagA"><input type="checkbox" value="贵州" name="region" v-model="region"/>贵州
                                </label>
                                <label class="tagA"><input type="checkbox" value="云南" name="region" v-model="region"/>云南
                                </label>
                                <label class="tagA"><input type="checkbox" value="西藏" name="region" v-model="region"/>西藏
                                </label>
                                <label class="tagA"><input type="checkbox" value="陕西" name="region" v-model="region"/>陕西
                                </label>
                                <label class="tagA"><input type="checkbox" value="甘肃" name="region" v-model="region"/>甘肃
                                </label>
                                <label class="tagA"><input type="checkbox" value="青海" name="region" v-model="region"/>青海
                                </label>
                                <label class="tagA"><input type="checkbox" value="宁夏" name="region" v-model="region"/>宁夏
                                </label>
                                <label class="tagA"><input type="checkbox" value="新疆" name="region" v-model="region"/>新疆
                                </label>
                                <label class="tagA"><input type="checkbox" value="台湾" name="region" v-model="region"/>台湾
                                </label>
                                <label class="tagA"><input type="checkbox" value="香港" name="region" v-model="region"/>香港
                                </label>
                                <label class="tagA"><input type="checkbox" value="澳门" name="region" v-model="region"/>澳门
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div>
            <span style="margin-bottom: 50px;margin-top: 50px; margin-left: 50px; font-size: 24px" class="yxtuijian2">
                请选择您的理想专业门类</span></div>


            <div class="row" style="background-color: white; margin:30px 50px; padding: 20px 5px; border-radius: 5px; " >
                <div class="col-lg-12">
                    <div class="wapperA" style="border-bottom: white; padding-right: 30px; margin-bottom: 0px">
                        <div class="tagwapper">
                            <div>
                            <span v-for="majorType in types">
                                <label class="tagA">
                                    <!--此处使用 :value="majorType.name" 替换 value="{{majorType.name}}" 就达到了想要的效果-->
                                    <input type="checkbox" :value="majorType" name="selected"
                                           v-model="selectedType"/>{{majorType}}
                                </label>
                            </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div>
            <span style="margin-bottom: 50px;margin-top: 50px; margin-left: 50px; font-size: 24px" class="yxtuijian2">
                请选择您的理想院校
            </span>
            </div>


        </div>

        <div class="container">
            <div style="font-size: 1.2em; margin-left: 90px">共查询到 <span style="color: #00acee"> {{this.totals}} </span> 所院校</div>
            <div class="row" style="background-color: white; margin:30px 50px; padding: 20px 5px; border-radius: 5px; " >
                <div class="col-lg-12">
                    <table class="table table-borderd table-hover">
                        <thead class="table table-borderd table-hover">
                        <tr>
                            <td>选择</td>
                            <td>院校名称</td>
                            <td>院校地区</td>
                            <td>院校类型</td>
                            <td>院校等级</td>
                            <td>最低录取分数</td>
                            <td>查看详情</td>
                        </tr>
                        </thead>
                        <tbody class="table table-borderd table-hover">
                        <tr v-for="college in collegess">
                            <td><input type="checkbox" :value="college.name" name="selectedCollege" v-model="selectedCollege"/></td>
                            <td><span v-text="college.name"></span></td>
                            <td><span v-text="college.region"></span></td>
                            <td><span v-text="college.type"></span></td>
                            <td><span v-text="college.level"></span></td>
                            <td><span v-text="college.lowest"></span></td>
                            <td>
                                <a :href="'./majors/college.html?id='+college.id" class="tablebtn">查看详情</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="next">
                        <!--大于1的时候可以点, 等于1的时候点了没效果-->
                        <a href="javascript:;" v-if="page>1" class="page" @click="findAll(page-1)">&lt;上一页</a>
                        <a href="javascript:;" v-if="page==1" class="page">&lt;上一页</a>
                        <a href="javascript:;" v-for="indexpage in totalPage" v-text="indexpage" @click="findAll(indexpage)"
                           style="margin-right: 5px"></a>
                        <!--小于最后一页的时候可以点, 在最后一页的时候点了没效果-->
                        <a href="javascript:;" v-if="page==totalPage" class="page">下一页&gt;</a>
                        <a href="javascript:;" v-if="page<totalPage" class="page" @click="findAll(page+1)">下一页&gt;</a>
                    </div>
                </div>
            </div>

        </div>

        <div style="margin-left: 500px">
            <button style=" " class="theBtn btn-primary"
                    @click="doRecommend()" >开始志愿填报推荐</button>
        </div>


    </div>


    <div v-show="afterRec">

        <div class="container">
            <div>
            <span style="margin-bottom: 50px;margin-top: 50px; margin-left: 50px; font-size: 24px" class="yxtuijian2">
                系统为您生成的志愿推荐的结果
            </span>
            </div>
            <div class="row" style="background-color: white; margin:30px 50px; padding: 20px 5px; border-radius: 5px; " >
                <div class="col-lg-12">
                    <table class="table table-borderd table-hover">
                        <thead class="table table-borderd table-hover">
                            <tr>
                                <td>志愿号</td>
                                <td>院校名称</td>
                                <td>专业名称</td>
                                <td>专业选课要求</td>
                                <td>院校专业最低分</td>
                                <td>院校专业平均分</td>
                                <td>院校详情</td>
                            </tr>
                        </thead>
                        <tbody class="table table-borderd table-hover">
                            <tr v-for="(recommend,index) in recommended">
                                <td><span style="background-color: #FF7E00;padding: 1px 2px;
                                border-radius: 5px;color: white;">{{index+1}}</span></td>
                                <td><span v-text="recommend.college.name"></span></td>
                                <td><span v-text="recommend.collegeMajors.mname"></span></td>
                                <td><span v-text="recommend.collegeMajors.type"></span></td>
                                <td><span v-text="recommend.collegeMajors.lowest"></span></td>
                                <td><span v-text="recommend.collegeMajors.average"></span></td>
                                <td>
                                    <a :href="'./majors/college.html?id='+recommend.college.id" class="tablebtn">查看详情</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>


    <!-- footer -->
    <div class="footer container">
        <div class="footertext">
            <div>项目经理: 李永琪</div>
            <div>邮箱: 1250025948@qq.com</div>
            <div>团队成员: 王兴胜 周经纬 刘宇航</div>
        </div>
    </div>

</div>

</body>
</html>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            users:{},
            type:"",
            region: [],
            types:[],
            selectedType:[],
            text:'',
            showGroup:false,
            colleges: [],
            selectedCollege:[],
            recommended:[],

            collegess:[],
            page:1,
            rows:9,
            totalPage:0,
            totals:0,

            beforeRec:true,
            afterRec:false
        },
            computed:{
                searchResult() {
                    if (this.text!=='') {
                        return this.colleges.filter(
                            item =>
                                item.indexOf(this.text) > -1,
                            this.showGroup=true,
                        );
                    } else {
                        this.showGroup=false
                        return this.colleges;
                    }
                }
            },
            methods:{
                test(){
                    console.log(this.users.score.toString())    //分数
                    console.log(this.users.type.toString())     //选课类型
                    console.log(this.region.toString())         //意愿地区
                    console.log(this.selectedType.toString())   //意愿专业类型
                    console.log(this.selectedCollege.toString())//理想大学
                },
                findUserById(id){
                    axios.get("http://localhost:8080/users/getUsersById?id="+id).then((res)=>{
                        console.log(res.data)
                        this.users = res.data;
                    });
                },
                queryAllTypes(){
                    axios.get("http://localhost:8080/majors/queryAllTypes").then((res)=>{
                        console.log(res.data)
                        this.types = res.data;
                    });
                },
                queryAllCollegesName(){
                    axios.get("http://localhost:8080/colleges/queryAllName").then((res)=>{
                        this.colleges = res.data;
                    });
                },
                setSelectedCollege(item){
                    this.selectedCollege = item;
                    this.text = '';
                },
                doRecommend(){
                    axios.get("http://localhost:8080/users/getRecommend?score="+this.users.score+
                    "&type="+this.users.type+"&aimRegion="+this.region+"&aimMajor="
                    +this.selectedType+"&aimCollege="+this.selectedCollege).then((res)=>{
                        this.recommended = res.data;
                        console.log(this.recommended)
                    });
                    this.beforeRec = false;
                    this.afterRec = true;
                },


                findAll(indexpage){
                    if(indexpage) this.page = indexpage;
                    const _this = this;
                    axios.get("http://localhost:8080/colleges/findByPage?page="+this.page+"&rows="+this.rows).then((res)=>{
                        console.log(res.data)
                        _this.collegess = res.data.colleges;
                        _this.totalPage = res.data.totalPage;
                        _this.totals = res.data.totals;
                    });
                },
                findByTags(){
                    const _this = this;
                    console.log("page="+this.page+"&rows="+this.rows)
                    axios.get("http://localhost:8080/colleges/findByPage?page="+this.page+"&rows="+this.rows).then((res)=>{
                        console.log(res.data)
                        console.log(location.href)
                        _this.collegess = res.data.colleges;
                        _this.totalPage = res.data.totalPage;
                        _this.totals = res.data.totals;
                    });
                },
                toAdmin(){
                    if(window.localStorage.getItem("role") === 'administrator') location.href='admin/user.html';
                    else alert("非管理员 无授权进入管理员界面!")
                }
            },
            created(){
                if(window.localStorage.getItem("online")!=="on"){
                    window.location='login.html';
                }else {
                    console.log(window.localStorage.getItem("userid").toString());
                    this.findUserById(window.localStorage.getItem("userid").toString());
                    this.queryAllTypes();
                    this.queryAllCollegesName();
                    this.findAll();
                    this.beforeRec=true;
                    this.afterRec=false;
                }
            }
    });
</script>
